<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
</body>

</html>
<script src="https://unpkg.com/vue@next"></script>
<script>
    // watch 侦听器
    // watchEffect 侦听器 , 偏向于 effect
    const app = Vue.createApp({
        setup() {
            const {reactive,watch,watchEffect,watchEffecttoRefs} = Vue;
            const nameObj = reactive({
                name:'dell',
                englishName:'lee',
            });
            // 具备一定的惰性 lazy
            // 参数可以拿到原始和当前值
            // 可以侦听多个数据的变化,用一个侦听器承载
            watch([()=>nameObj.name,()=>nameObj.englishName],([curName,CurEng],[prevName,preEng])=>{
                console.log('watch',curName,prevName,'---',CurEng,preEng);
            })


            // 立即执行  没有惰性  immediate
            // 不需要传递你要侦听的内容,自动会感知代码依赖,不需要传递很多参数,只要传递一个毁掉函数
            // 不能获取之前数据的值
            // const stop =  watchEffect(()=>{
            //     console.log(nameObj.name);
            //     console.log(nameObj.englishName);
            //     setTimeout(()=>{
            //         stop();
            //     },5000)
            // })

            const {name,englishName}=toRefs(nameObj);
            return {name,englishName}
        },
        template: `
        <div>
            <div>
                Name:<input v-model="name">
            </div>
            <div>
                Name is {{name}}
            </div>
            <div>
                EnglishName:<input v-model="englishName">
            </div>
            <div>
                EnglishName is {{englishName}}
            </div>
        </div>
        `,
    })
    const vm = app.mount('#root')
</script>